<template>
	<view>
		<u-navbar title="添加收获地址" :border-bottom='false'></u-navbar>
		<view class="main">
			<u-form :model="addressFrom" ref="uForm" label-position='top'>
				<u-form-item :border-bottom='false' label="姓名" prop="consignee">
					<u-input v-model="addressFrom.consignee" placeholder='请输入收货人姓名' />
				</u-form-item>
				<u-form-item :border-bottom='false' label="手机号" prop="link">
					<u-input v-model="addressFrom.link" type='number' placeholder='请输入收货人手机号' />
				</u-form-item>
				<u-form-item :border-bottom='false' label="收货地址" prop="province">
					<u-input v-model="addressFrom.province" disabled placeholder='请选择所在地区' />
					<view slot='right' class="slot-class" @click='showPicker= true'>
					<u-icon name="arrow-right" color="#999999" size="32"></u-icon>
					</view>
				</u-form-item>
				<u-form-item :border-bottom='false' label="详细地址" prop="address">
					<u-input v-model="addressFrom.address" placeholder='如：街道、门牌、小区、单元' />
				</u-form-item>
			</u-form>
		<!-- <view class="checkbox">
				<u-checkbox v-model='checked' shape="circle" @change='checkedFn'></u-checkbox>
				<text>设为默认地址</text>
			</view> -->
			<view class="sunBtn" @click="submit">
				保存
			</view>
		</view>
		<u-picker v-model="showPicker" mode="region" @confirm='confirmFn'></u-picker>
	</view>
</template>

<script>
	import myRequest from '@/api/index.js'
	export default {
		data() {
			return {
				showPicker: false,
				checked: false,
				addressFrom: {
					consignee: '',
					link: '',
					province: '',
					address: ''
				},
				is_default: 0,
				rules: {
					consignee: [{
						required: true,
						message: '请输入收货人姓名',
						trigger: 'blur',
					}],
					link: [{
						required: true,
						message: '请输入收货人手机号',
						trigger: 'blur'
					}],
					province: [{
						required: false,
						message: '请选择收货地址',
						trigger: 'change'
					}],
					address: [{
						required: true,
						message: '请输入详细地址',
						trigger: 'blur'
					}]
				},
				province_code: '',
				city_code: '',
				district_code: ''
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			// 选择市县级
			confirmFn(e) {
				// console.log(e)
				this.addressFrom.province = e.province.label + ' ' + e.city.label + ' ' + e.area.label
				this.province_code = e.province.value + '0000'
				this.city_code = e.city.value + '00'
				this.district_code = e.area.value
			},
			// 是否默认
			// checkedFn(e) {
			// 	if (e.value) {
			// 		this.is_default = 1
			// 	}
			// },
			submit() {
				let {
					is_default,
					province_code,
					city_code,
					district_code
				} = this
				this.$refs.uForm.validate(async valid => {
					if (valid) {
						console.log('验证通过')
						let res = await myRequest.addMyaddress({
							consignee: this.addressFrom.consignee,
							link: this.addressFrom.link,
							address: this.addressFrom.address,
							province_code: province_code,
							city_code: city_code,
							district_code: district_code,
							// is_default:is_default ==1?is_default.toString():'0',
						})
						if (res.status) {
							uni.showToast({
								title: '添加成功',
							})
							setTimeout(function() {
								uni.navigateBack({
									delta: 1
								})
							}, 2000)
						}
					} else {
						console.log('验证失败');
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		padding: 32rpx 28rpx;

		.checkbox {
			display: flex;
			align-items: center;

			text {
				font-size: 32rpx;
				color: #999999;
			}
		}

		.sunBtn {
			margin: 140rpx auto 0;
			width: 660rpx;
			height: 100rpx;
			background: linear-gradient(180deg, #50A3FE 0%, #3064FC 100%);
			border-radius: 16rpx;
			text-align: center;
			font-size: 34rpx;
			font-family: Segoe UI;
			font-weight: 400;
			line-height: 100rpx;
			color: #FFFFFF;
		}

		.slot-class {
			image {
				width: 20rpx;
				height: 32rpx;
			}


		}
	}



	/deep/ .u-form-item {
		background-color: #FFFFFF;
		border-radius: 16rpx;
		margin-bottom: 32rpx;
		padding-left: 24rpx;
		padding-right: 24rpx;
	}

	/deep/ .u-checkbox__label {
		margin-left: 0;
	}
</style>
